<template>
	 <view class="InviteItem"> 
			<view class="item" @tap="showTime">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">预约时间</text>
				</view>
				<text class="divide"></text>
				<view class="selectTime" v-if="!tutorPlaceData.startTime">
					<text class="timeStart">开始时间</text>
					<text class="timeCenter"></text>
					<text class="timeEnd">结束时间</text>
				</view>
				<view class="selectTime" v-else>
					<text class="timeStart">{{tutorPlaceData.startTime}}</text>
					<text class="timeCenter"></text>
					<text class="timeEnd">{{tutorPlaceData.endTime}}</text> 
				</view>
			</view>
			<!-- <view class="item">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">预约时长</text>
				</view>
				<text class="divide"></text>
				<view class="selectTime">
					<text v-if="!duration">(选择预约时间后自动计算)</text>  
					<text v-else>{{duration}}</text> 
				</view>
			</view> -->
			<view class="item" @tap="addressSelect">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">预约地址</text>
				</view>
				<text class="divide"></text>
				<view class="place" >
					<text>{{tutorPlaceData.merchantInfo.address}}</text>
					<tui-icon name="arrowdown" :size="22" color="#999999"></tui-icon>
				</view>
			</view>
			<view class="item">
				<view class="flexc"> 
				 <text class="isQuired">*</text>
					<text class="label">您的称呼</text>
				</view>
				<text class="divide"></text>
				<view class="place">
					<tui-input padding="0" backgroundColor="#f5f5f5" :size="28" :borderBottom="false" :borderTop="false" placeholder="请输入您的称呼" clearable v-model="tutorPlaceData.appellation"></tui-input>
					<tui-icon name="arrowdown" :size="22" color="#999999"></tui-icon>
				</view>
			</view>
			<view class="item">
				<view class="flexc">
					<text class="isQuired">*</text>
					<text class="label">联系电话</text>
				</view>
				<text class="divide"></text>
				<view class="selectTime">
					 <tui-input type="number" backgroundColor="#f5f5f5" padding="0" :size="28" :borderBottom="false" :borderTop="false" placeholder="请输入手机号码" clearable v-model="tutorPlaceData.subscribePhone"></tui-input>
				</view>
			</view>
			<view class="item">
				<view class="flexc"> 
				  <text class="isQuired hide">*</text>
					<text class="label">备注</text>
				</view>
				<text class="divide"></text>
				<view class="place">
					 <tui-textarea v-model="tutorPlaceData.remark" :size="28" padding="0" backgroundColor="#f5f5f5" :borderBottom="false" :borderTop="false" height="200rpx"   placeholder="请输入备注信息..."></tui-textarea> 
				</view>
			</view> 
			<tui-datetime :type="4" ref="dateTime" @confirm="changeTime"></tui-datetime>
			<tui-picker :valueField="'id'"  :textField="'address'" :show="isPlace" :pickerData="placeShopList" @hide="isPlace=false" @change="change"></tui-picker>
	 </view>
</template>

<script>
	import { getPlaceShopList } from "@/http/api/shop/shop.js" 
	export default {
		name: 'InviteItem',
		emits: [],
		props: { 
			//分类id
			categoryId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				//教练邀约数据
				 tutorPlaceData:{
					 assistantId:'',//教练id
					 merchantId:'',//所属商家id
					 subscribePhone:'',//预约手机号
					 appellation:'',//称呼
					 startTime:'',//开始时间
					 endTime:'',//结束时间
					 remark:'',//备注
					 merchantInfo: {
					     id: 0,
					     merchantName: "",
					     address: "",
					     longitude: 0,
					     latitude: 0
					},
				 },
				 //可以下单的商家选择
				 isPlace:false, 
				 placeShopList:[] //可以下单的商家列表
			};
		}, 
		computed:{
			// duration(){
			// 	let time=this.$utils.calculateDuration(this.tutorPlaceData.startTime,this.tutorPlaceData.endTime)
			// 	return time>=0 ? time : 0
			// }
		},
		methods: {  
			reload(){
				this.tutorPlaceData={
						 assistantId:'',//教练id
						 merchantId:'',//所属商家id
						 subscribePhone:'',//预约手机号
						 appellation:'',//称呼
						 startTime:'',//开始时间
						 endTime:'',//结束时间
						 remark:'',//备注
						 merchantInfo: {
							 id: 0,
							 merchantName: "",
							 address: "",
							 longitude: 0,
							 latitude: 0
						}
				}
			},
				//选择地址
				addressSelect() {
					 this.isPlace=true
					 getPlaceShopList({categoryId:this.categoryId}).then(res=>{
						 if(res.code===200){
							 this.placeShopList=res.data 
						 }
					 })
				},
				//选择商家
				change: function(e) {
					//选择的商家结果 
					const item = this.placeShopList.find((item) => item.id === e.id);
					this.tutorPlaceData.merchantInfo={
						id:e.id,
						merchantName:e.merchantName,
						address: item.address,
						longitude:  item.coordinates&&item.coordinates.longitude,
						latitude:  item.coordinates&&item.coordinates.latitude
					}  
				},
				//选择时间
				changeTime: function(e) { 
					//选择的分类结果 
					let hour = this.tutorPlaceData.startTime&&this.tutorPlaceData.startTime.split(':')[0]
					 if(e.hour*1 < hour*1 && minute*1>0){
						 this.tutorPlaceData.startTime=e.result
						 return
					 }
					 if(this.tutorPlaceData.startTime){
						 this.tutorPlaceData.endTime=e.result
					 }else{
						 this.tutorPlaceData.startTime=e.result
					 } 
				},
				//调用此方法显示选择器，需等组件初始化完成后调用，避免在onLoad中调用
				showTime: function(e) {
					this.$refs.dateTime && this.$refs.dateTime.show();
				}
				
		}
	};
</script>

<style  lang="scss" scoped>
	.item{
		background: #F5F5F5;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding:   22rpx 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		.hide{
			visibility: hidden;
		}
		.isQuired{
			 font-weight: 500;
			 font-size: 28rpx;
			 color: #FF1F00;
			 line-height: 33rpx;
			 text-align: center;
			 font-style: normal;
			 text-transform: none;
		}
		.flexc{
			display: flex;
			align-items: center;
		}
		.label{
			 font-weight: 500;
			 font-size: 28rpx;
			 width: 112rpx;
			 color: #333333;
			 margin-left: 8rpx;
			 line-height: 33rpx;
			 text-align: left;
			 font-style: normal;
			 text-transform: none;
		}
		.divide{
			margin-left: 20rpx;
			margin-right: 28rpx;
			background-color: #666666;
			 width: 2rpx;
			 height: 28rpx;
		}
		.selectTime{ 
			 font-weight: 500;
			 font-size: 28rpx;
			 color: #999999;
			 line-height: 33rpx;
			 text-align: left;
			 font-style: normal;
			 text-transform: none;
			 display: flex;
			 justify-content: flex-start;
			 align-items: center;
			 width: 70%;
			 .timeCenter{
				 height: 2rpx;
				 width: 30rpx;
				 background-color: #999999;
			 }
		}
		.place{
			font-weight: 500;
			width: 70%;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>